<template>
    <div class="radio_container">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>产品</el-breadcrumb-item>
            <el-breadcrumb-item>闪购电台管理</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="radio_list_card">

            <!-- title -->
            <el-row class="title">
                <el-col :span="7">
                    <span class="text">音频名称：</span>
                    <el-input size="medium" style="width: 70%;" v-model="name" placeholder="请输入音频名称"></el-input>
                </el-col>

                <el-col :span="15">
                    <el-button type="primary" @click="search" style="padding: 9px 25px;" size="medium" plain>筛选</el-button>
                </el-col>

                <el-col :span="2">
                    <el-button type="primary" @click="add_radio()">添加音频</el-button>
                </el-col>
            </el-row>

            <!-- 主体内容 -->
            <div class="radio_content">
                <!-- 表格 -->
                <el-table class="radio_list_table" :data="tableData.slice((page-1)*limit,page*limit)"  style="width: 100%" border>
                    <el-table-column prop="name" label="名称" width="400">
                        <div class="detail_box" slot-scope="scope">
                            <div class="name_box">
                                <div class="img_box">
                                    <img :src="scope.row.picture">
                                </div>

                                <div class="text_box">
                                    <div class="text mar_b">{{scope.row.title}}</div>
                                    <div class="text">{{scope.row.duration}}</div>
                                </div>
                            </div>
                        </div>
                    </el-table-column>

                    <el-table-column prop="stageName" sortable label="期数">
                    </el-table-column>

                    <el-table-column prop="create_time" label="发布时间">
                    </el-table-column>

                    <el-table-column prop="end_time" label="禁售时间">
                    </el-table-column>

                    <el-table-column prop="status_text" label="是否上线">
                    </el-table-column>

                    <el-table-column prop="time" label="操作">
                        <div class="do_soming" slot-scope="scope">
                            <div class="preview" @click="edit(scope.row.id)">修改</div>
                            <div class="down_line" @click="deleteRow(scope.row.id)">删除</div>
                            <div class="Go_online" @click="toList(scope.row.id)">关联商品</div>
                            <div class="down_line" v-if="scope.row.status === 1" @click="downLine(scope.row.id)">下线</div>
                            <div class="down_line" v-else @click="onLine(scope.row.id)">上线</div>
                        </div>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 分页器 -->
            <el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-size="limit"
                           layout="total, prev, pager, next" :total="count">
            </el-pagination>
        </el-card>
    </div>
</template>

<script src='../../../static/js/radio/radio_list.js'></script>


<style scoped>
    @import "../../../static/css/radio/radio_list.css";
</style>

